<template>
  <div class="editConsultantInfo-page">
    <GhNavBar title="编辑个人名片"  rightText="保存" @click-right="clickRight"  />
    <div class="editConsultantInfo-content">
        <van-form ref="form" >
            <van-field v-model="personalInfo.name" clickable   label="姓名" required  autocomplete="off" ></van-field>
            <van-field v-model="personalInfo.avatar" clickable   label="个人头像" required  autocomplete="off" ></van-field>
            <van-field v-model="personalInfo.coun_label"  name="radio"   label="等级" required label-width="80px" autocomplete="off" >
                <template #input> 
                   <van-radio-group v-model="personalInfo.coun_label"  direction="horizontal">
                       <van-radio name="1">1星</van-radio>
                       <van-radio name="2">2星</van-radio>
                       <van-radio name="3">3星</van-radio>
                     </van-radio-group>
                </template>
           </van-field>
           <van-field
           v-model="personalInfo.introduction"
           rows="5"
           required
           class="custom-field"
           label="详情"
           label-width="40px"
           autosize
           maxlength="250"
           type="textarea"
           show-word-limit
           placeholder="个人简介"
         />
         <van-field  v-model="personalInfo.experience"   label="工作经验" required label-width="70px" autocomplete="off" type="digit" placeholder="请输入整数" ></van-field>
         <van-field  v-model="personalInfo.gender" name="radio"    label="性别" required label-width="80px" autocomplete="off" >
             <template #input> 
                <van-radio-group v-model="personalInfo.gender" direction="horizontal">
                    <van-radio name="男">男</van-radio>
                    <van-radio name="女">女</van-radio>
                  </van-radio-group>
             </template>
        </van-field>
        </van-form>
    </div>

  </div>
</template>

<script setup>
import {ref,reactive,onBeforeMount,computed,onMounted,watch,onBeforeUnmount} from "vue"
import { Toast, Dialog } from 'vant'
import 'vant/es/toast/style'
import{useRouter,useRoute}from 'vue-router'
import {useUserStore}from '@/stores'
import{getconsultantInfoByaccount,updateConsultantInfo}from '@/services/consultant'
const route =useRoute()
const router =useRouter();  
const store = useUserStore()

//个人名片响应式变量
const personalInfo=ref({})
onMounted(async()=>{
    const account=JSON.parse(localStorage.getItem('gh-user')).user.userData.account
    const res=await getconsultantInfoByaccount(account)
    personalInfo.value=res.data
})

//点击保存更新个人信息
const clickRight=async()=>{
    if(personalInfo.value.avatar.trim()===''){
        Toast('请输入图片链接')
        return
    }
    if(personalInfo.value.name.trim()===''){
        Toast('请输入姓名')
        return
    }
    if(personalInfo.value.introduction.trim()===''){
        Toast('请输入简介')
        return
    }
    if(personalInfo.value.experience.trim()===''){
        Toast('请输入工作经验')
        return
    }
    const formData=new FormData();
    formData.append('id',personalInfo.value.id)
    formData.append('name',personalInfo.value.name)
    formData.append('avatar',personalInfo.value.avatar)
    formData.append('coun_label',personalInfo.value.coun_label)
    formData.append('introduction',personalInfo.value.introduction)
    formData.append('experience',personalInfo.value.experience)
    formData.append('gender',personalInfo.value.gender)
    const res=await updateConsultantInfo(formData).then((response)=>{
      return response
    }).catch((error)=>{
     return error
    })
   if(res.status!==201){
   if(res.response.status==402){
        const toastMessage=res.response.data.error
        Toast.fail(toastMessage)
        return
       }
    }
    Toast.success('修改成功')
    personalInfo.value={}
    router.push('/consultant-admin')
}


</script>

<style lang="scss" scoped>
.editConsultantInfo-page{
    width: 100%;
    .editConsultantInfo-content{
        margin-top: 40px;
    }
}

</style>
